/** *通用形列表-查询部分 */
<template>
    <el-form
        v-if="formArr.length > 0"
        ref="formRef"
        :model="formDataNew"
        :rules="rules"
        label-width="6vw"
        inline
        :show-message="false"
        status-icon
        class="myElForm"
    >
        <template v-for="(item1, index1) in formArr" :key="`0-${index1}`">
            <el-form-item v-if="index1 < isFoldNum || !isFoldFlag" :label="item1.fieldText" :prop="item1.fieldName">
                <el-input
                    v-if="item1.fieldType == 'input'"
                    v-model="formDataNew[item1.fieldName]"
                    :type="item1.inputType"
                    :maxlength="item1.inputMaxLength"
                    :disabled="item1.fieldDisabled"
                    :placeholder="`请输入${item1.fieldText}`"
                    clearable
                    class="my-input"
                />
                <GeneralSelect
                    v-else-if="item1.fieldType == 'select'"
                    v-model="formDataNew[item1.fieldName]"
                    :multiple="item1.selectmultiple"
                    :multipleLimit="item1.selectMultipleLimit ? item1.selectMultipleLimit : 0"
                    :collapseTags="item1.selectCollapseTags"
                    :collapseTagsTooltip="item1.selectcollapseTagsTooltip"
                    :placeholder="`请选择${item1.fieldText}`"
                    clearable
                    :disabled="item1.fieldDisabled"
                    noDataText="暂无选项"
                    class="my-select"
                    :options="item1.selectOptions"
                    :dictionary="item1.selectDictionary"
                    :defalutOptionsIndex="item1.selectDefalutOptionsIndex"
                />
                <!-- <el-select
                    v-else-if="item1.fieldType=='select'"
                    v-model="formDataNew[item1.fieldName]"
                    :multiple="item1.selectmultiple"
                    :multiple-limit="item1.selectMultipleLimit ? item1.selectMultipleLimit : 0"
                    :collapse-tags="item1.selectmultiple"
                    :collapse-tags-tooltip="item1.selectmultiple"
                    :placeholder="`请选择${item1.fieldText}`"
                    clearable
                    :disabled="item1.fieldDisabled"
                    no-data-text="暂无选项"
                    class="my-select"
                >
                    <el-option
                        v-for="item2 in item1.selectOptions"
                        :key="`1-${index1}`"
                        :label="item2.label"
                        :value="item2.value"
                        :disabled="item2.disabled"
                    />
                </el-select> -->
                <el-date-picker
                    v-else-if="item1.fieldType == 'date'"
                    v-model="formDataNew[item1.fieldName]"
                    :type="item1.dateType ? item1.dateType : 'date'"
                    :value-format="item1.dateValueFormat"
                    :default-value="item1.dateDefaultValue"
                    :disabled-date="item1.dateDisabledDate"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    :disabled="item1.fieldDisabled"
                    :placeholder="`请选择${item1.fieldText}`"
                    class="my-date-picker"
                />
                <!-- cascader级联选择 -->
                <el-cascader
                    v-else-if="item1.fieldType == 'cascader'"
                    v-model="formDataNew[item1.fieldName]"
                    :options="item1.cascaderOptions"
                    :props="item1.cascaderProps"
                    :show-all-levels="item1.cascaderShowAllLevels"
                    :collapse-tags="item1.cascaderCollapseTags"
                    :collapse-tags-tooltip="item1.cascaderCollapseTagsTooltip"
                    :max-collapse-tags="item1.cascaderMaxCollapseTags"
                    :filterable="item1.cascaderFilterable"
                    clearable
                    :disabled="item1.fieldDisabled"
                    :placeholder="`请选择${item1.fieldText}`"
                    class="my-cascader"
                />
                <AdministrativeDivisionsCascader
                    v-else-if="item1.fieldType == 'administrativeDivisionsCascader'"
                    v-model="formDataNew[item1.fieldName]"
                    :disabled="item1.fieldDisabled"
                />
            </el-form-item>
        </template>

        <el-form-item>
            <el-button type="primary" :icon="Search" @click="onSubmit(formRef)">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" :icon="RefreshRight" @click="onReset(formRef)">重置</el-button>
        </el-form-item>
        <el-form-item v-if="isFoldFlag && isFoldNum < formArr.length">
            <el-button type="primary" link :icon="CaretBottom" @click="isFoldFlag = !isFoldFlag">展开</el-button>
        </el-form-item>
        <el-form-item v-else-if="!isFoldFlag && isFoldNum < formArr.length">
            <el-button type="primary" link :icon="CaretTop" @click="isFoldFlag = !isFoldFlag">折叠</el-button>
        </el-form-item>
        <!-- <el-form-item>
            <el-button 
                type="primary" 
                @click=""
            >
                新增
            </el-button>
        </el-form-item>
        <el-form-item>
            <el-button 
                type="primary" 
                @click=""
            >
                导出
            </el-button>
        </el-form-item> -->
    </el-form>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue';
    import type { Ref, Raw } from 'vue';
    import {} from '@/apis';
    import { isPhone, deepClone } from '@/utils';

    import { useRoute, useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useStore } from '@/store';
    import { ElMessage } from 'element-plus';
    import { Lock, User, Monitor, Phone, Search, RefreshRight, CaretTop, CaretBottom } from '@element-plus/icons-vue';
    import AdministrativeDivisionsCascader from '@/components/administrativeDivisionsCascader/AdministrativeDivisionsCascader.vue';
    import GeneralSelect from '@/components/generalSelect/GeneralSelect.vue';

    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const formRef = ref<any>();
    const rules = ref<any>({
        // account: [
        //     {
        //         required: true,
        //         message: '请输入账号！',
        //         trigger: 'blur'
        //     },
        // ],
        // password: [
        //     {
        //         required: true,
        //         message: '请输入密码！',
        //         trigger: 'blur'
        //     },
        // ]
    });
    const isFoldFlag = ref<boolean>(true); //折叠 / 展开

    const formArr = defineModel<any>('formArr', {
        required: false,
        default: [],
    });
    const formDataNew = defineModel<any>('formDataNew', {
        required: false,
        default: {},
    });
    const formDataOriginal = defineModel<any>('formDataOriginal', {
        required: false,
        default: {},
    });
    const isFoldNum = defineModel<number>('isFoldNum', {
        required: false,
        default: 20,
    });
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        tableSearch: [data: any];
    }>();

    watch(
        () => formArr,
        (nVal, oVal) => {
            // console.log(nVal.value)
            let formObj = {};
            let formRules = {};
            nVal.value.forEach((item, index) => {
                formObj[item.fieldName] = item.fieldValue;
                formRules[item.fieldName] = item?.fieldRules;
            });
            formDataNew.value = formObj;
            // formDataOriginal.value = JSON.parse(JSON.stringify(formObj))
            formDataOriginal.value = deepClone(formObj);

            rules.value = formRules;
        },
        {
            immediate: true,
            deep: true,
        }
    );

    const onSubmit = async (formEl: any) => {
        if (!formEl) return;
        // try {
        //     let res = await formEl.validate()
        //     console.log(res)

        // } catch (err) {
        //     console.log(err)

        // }
        formEl.validate((valid, fields) => {
            // console.log(valid)
            // console.log(fields)
            if (valid) {
                // formDataOriginal.value = JSON.parse(JSON.stringify(formDataNew.value))
                formDataOriginal.value = deepClone(formDataNew.value);
                // console.log(deepClone(formDataNew.value))
                // console.log(JSON.parse(JSON.stringify(formDataNew.value)))

                emits('tableSearch', formDataOriginal.value);
            } else {
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                });
            }
        });
    };
    const onReset = (formEl: any) => {
        formEl.resetFields();
        let formObj = {};
        formArr.value.forEach((item, index) => {
            formObj[item.fieldName] = item.fieldValue;
        });
        formDataNew.value = formObj;
        console.log(formDataNew.value);
    };
</script>

<style lang="scss" scoped>
    .myElForm {
        max-height: 200px;
        overflow-y: auto;
        text-align: left;
        // label文字垂直居中
        :deep(.el-form-item__label) {
            height: 100%;
            align-items: center;
        }
        :deep(.el-form-item__label-wrap) {
            align-items: center;
        }
    }
    // 输入框长度
    :deep(.my-input .el-input__wrapper) {
        box-sizing: border-box;
        width: 240px;
    }
    // 选择框长度
    .my-select {
        width: 240px;
    }
    // 日期
    :deep(.my-date-picker) {
        box-sizing: border-box;
        width: 240px;
    }
    // 多级选项
    :deep(.my-cascader) {
        box-sizing: border-box;
        width: 240px;
    }
</style>
